<template>
  <div class="sidebar">
    <div class="sidebar-header">
      <h2>节点类型</h2>
    </div>
    <div class="node-list">
      <div v-for="(group, groupName) in nodeGroups" :key="groupName" class="node-group">
        <div class="group-header">
          <i :class="groupIcons[groupName]"></i>
          {{ groupName }}
        </div>
        <div class="group-content">
          <div v-for="node in group" :key="node.type" class="node-item" :class="node.type" draggable="true"
            @dragstart="handleDragStart($event, node.type)">
            <i :class="node.icon"></i>
            <span class="node-title">{{ node.title }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface NodeType {
  type: string;
  title: string;
  icon: string;
}

const nodeGroups = computed(() => ({
  '基础节点': [
    { type: 'start', title: '开始节点', icon: 'fas fa-play-circle' },
    { type: 'end', title: '结果节点', icon: 'fas fa-stop-circle' },
  ],
  '智能节点': [
    { type: 'model', title: '大模型节点', icon: 'fas fa-brain' },
    { type: 'agent', title: '智能体节点', icon: 'fas fa-robot' },
  ],
  '逻辑节点': [
    { type: 'ifelse', title: '条件判断节点', icon: 'fas fa-code-branch' },
    { type: 'iterator', title: '迭代器节点', icon: 'fas fa-redo' },
    { type: 'code', title: '代码节点', icon: 'fas fa-code' },
  ],
  '工具节点': [
    { type: 'template', title: '模板转换节点', icon: 'fas fa-file-alt' },
    { type: 'http', title: 'HTTP节点', icon: 'fas fa-globe' },
    { type: 'database', title: '数据库节点', icon: 'fas fa-database' },
  ],
  '邮件节点': [
    { type: 'email', title: '邮件节点', icon: 'fas fa-envelope' },
  ],
}));

const groupIcons = {
  '基础节点': 'fas fa-cube',
  '智能节点': 'fas fa-brain',
  '逻辑节点': 'fas fa-cogs',
  '工具节点': 'fas fa-tools',
  '邮件节点': 'fas fa-envelope',
};

const handleDragStart = (event: DragEvent, nodeType: string) => {
  if (event.dataTransfer) {
    event.dataTransfer.setData('node-type', nodeType);
    event.dataTransfer.effectAllowed = 'copy';
  }
};
</script>

<style scoped>
.sidebar {
  width: 280px;
  height: 100%;
  background: white;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.03);
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(to right, #f9fafb, #ffffff);
}

.sidebar-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-header h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 18px;
  background: linear-gradient(to bottom, #007bff, #6610f2);
  border-radius: 2px;
}

.node-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.node-group {
  margin-bottom: 28px;
  background: #fafbfc;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.node-group:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.node-group:last-child {
  margin-bottom: 0;
}

.group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  padding: 14px 16px;
  background: linear-gradient(to right, #f1f5f9, #f8fafc);
  border-bottom: 1px solid #e5e7eb;
}

.group-header i {
  font-size: 16px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  color: #4b5563;
}

.group-content {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.node-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: move;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.node-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 6px;
  border-radius: 3px 0 0 3px;
}

.node-item:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.node-item:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.node-item i {
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.03);
  transition: all 0.2s;
}

.node-item:hover i {
  transform: scale(1.1);
}

.node-title {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  flex: 1;
}

/* 节点类型特定样式 */
.node-item.start {
  border-color: rgba(40, 167, 69, 0.3);
}

.node-item.start::before {
  background: linear-gradient(to bottom, #28a745, #34ce57);
}

.node-item.start i {
  color: #28a745;
  background: rgba(40, 167, 69, 0.1);
}

.node-item.end {
  border-color: rgba(220, 53, 69, 0.3);
}

.node-item.end::before {
  background: linear-gradient(to bottom, #dc3545, #e4606d);
}

.node-item.end i {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}

.node-item.model {
  border-color: rgba(0, 123, 255, 0.3);
}

.node-item.model::before {
  background: linear-gradient(to bottom, #007bff, #1a88ff);
}

.node-item.model i {
  color: #007bff;
  background: rgba(0, 123, 255, 0.1);
}

.node-item.agent {
  border-color: rgba(111, 66, 193, 0.3);
}

.node-item.agent::before {
  background: linear-gradient(to bottom, #6f42c1, #8458cd);
}

.node-item.agent i {
  color: #6f42c1;
  background: rgba(111, 66, 193, 0.1);
}

.node-item.ifelse {
  border-color: rgba(253, 126, 20, 0.3);
}

.node-item.ifelse::before {
  background: linear-gradient(to bottom, #fd7e14, #fd9843);
}

.node-item.ifelse i {
  color: #fd7e14;
  background: rgba(253, 126, 20, 0.1);
}

.node-item.iterator {
  border-color: rgba(32, 201, 151, 0.3);
}

.node-item.iterator::before {
  background: linear-gradient(to bottom, #20c997, #3dd5ac);
}

.node-item.iterator i {
  color: #20c997;
  background: rgba(32, 201, 151, 0.1);
}

.node-item.code {
  border-color: rgba(108, 117, 125, 0.3);
}

.node-item.code::before {
  background: linear-gradient(to bottom, #6c757d, #868e96);
}

.node-item.code i {
  color: #6c757d;
  background: rgba(108, 117, 125, 0.1);
}

.node-item.template {
  border-color: rgba(23, 162, 184, 0.3);
}

.node-item.template::before {
  background: linear-gradient(to bottom, #17a2b8, #1fc8e3);
}

.node-item.template i {
  color: #17a2b8;
  background: rgba(23, 162, 184, 0.1);
}

.node-item.http {
  border-color: rgba(232, 62, 140, 0.3);
}

.node-item.http::before {
  background: linear-gradient(to bottom, #e83e8c, #ed5fa1);
}

.node-item.http i {
  color: #e83e8c;
  background: rgba(232, 62, 140, 0.1);
}

.node-item.database {
  border-color: rgba(121, 85, 72, 0.3);
}

.node-item.database::before {
  background: linear-gradient(to bottom, #795548, #936860);
}

.node-item.database i {
  color: #795548;
  background: rgba(121, 85, 72, 0.1);
}

.node-item.email {
  border-color: rgba(156, 39, 176, 0.3);
}

.node-item.email::before {
  background: linear-gradient(to bottom, #9C27B0, #BA68C8);
}

.node-item.email i {
  color: #9C27B0;
  background: rgba(156, 39, 176, 0.1);
}
</style>